import React, { useState } from 'react';
import style from './Imglist.module.css';

function Imglist() {
  // 获取已有的 URL
  let existingUrlsString = localStorage.getItem('url');
  let existingUrls = existingUrlsString? existingUrlsString.split(',') : [];

  const [selectedImages, setSelectedImages] = useState([]);
  const [isAllSelected, setIsAllSelected] = useState(false);

  // 全选或取消全选
  const handleSelectAll = () => {
    if (isAllSelected) {
      setSelectedImages([]);
    } else {
      setSelectedImages(existingUrls.filter(url =>
        url.endsWith('.png') || url.endsWith('.jpg') || url.endsWith('.jpeg') || url.endsWith('.svg') || url.endsWith('.gif')
      ));
    }
    setIsAllSelected(!isAllSelected);
  };

  // 单选
  const handleSingleSelect = (url) => {
    if (selectedImages.includes(url)) {
      setSelectedImages(selectedImages.filter(item => item!== url));
    } else {
      setSelectedImages([...selectedImages, url]);
    }
  };

  // 删除选中的图片
  const deleteSelectedImages = () => {
    const updatedUrls = existingUrls.filter(item =>!selectedImages.includes(item));
    localStorage.setItem('url', updatedUrls.join(','));
    setSelectedImages([]);
    setIsAllSelected(false);
  };

  // 删除全选的图片
  const deleteAllSelectedImages = () => {
    const updatedUrls = existingUrls.filter(item =>!isAllSelected ||!selectedImages.includes(item));
    localStorage.setItem('url', updatedUrls.join(','));
    setSelectedImages([]);
    setIsAllSelected(false);
  };

  return (
    <div className={style.Recommendedimages}>
      <div>
        <input type="checkbox" checked={isAllSelected} onChange={handleSelectAll} />全选
        <button className={style.deleteAllBtn} onClick={deleteAllSelectedImages}>删除选中</button>
      </div>
      {existingUrls.map((url, index) => {
        if (url.endsWith('.png') || url.endsWith('.jpg') || url.endsWith('.jpeg') || url.endsWith('.svg') || url.endsWith('.gif')) {
          return (
            <div className="image-container" key={index}>
              <div className="imageWrapper">
                <img
                  style={{ width: '150px', height: '150px' }}
                  src={url}
                  alt={`Recommended ${index}`}
                  className={selectedImages.includes(url)? style.selected : ''}
                  onClick={() => handleSingleSelect(url)}
                />
                <input
                  type="checkbox"
                  className={style.checkbox}
                  checked={selectedImages.includes(url) || isAllSelected}
                  onChange={() => handleSingleSelect(url)}
                />
              </div>
              <span className={style.imageDot} onClick={() => {
                const dotMenu = document.getElementById(`dot-menu-${index}`);
                if (dotMenu) {
                  dotMenu.style.display = dotMenu.style.display === 'block'? 'none' : 'block';
                }
              }}>...</span>
              <div className={style.popupMenu} id={`dot-menu-${index}`}>
                <button onClick={() => deleteSelectedImages(url)}>删除</button>
              </div>
            </div>
          );
        } else {
          return null;
        }
      })}
    </div>
  );
}

export default Imglist;